<template>
  <BaseMainSlot>
    <!-- 这页面 -->
    <template v-slot:zhactbar>
      <ActionBar
        :page-no="114"
        :add-active="addActive"
        :del-active="delActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        :has-edit="false"
        :has-del="false"
        @add="add"
        @cancel="cancel"
        @del="del"
      />
    </template>
    <template v-slot:boxleft>
      <div class="zhtabletitle">已有虫情设备</div>
      <el-table
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="85%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="deviceName" label="虫情设备名称" />
        <el-table-column prop="deviceNumber" label="设备编号" />
        <el-table-column label="经纬度">
          <template slot-scope="scope">
            <div v-if="scope.row.latitude">
              纬度: {{ scope.row.latitude }}
            </div>
            <div v-if="scope.row.longitude">
              经度: {{ scope.row.longitude }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="200" label="操作">
          <template v-if="scope.row.insectDeviceId" slot-scope="scope">
            <el-button
              v-if="judgePermission(114,'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              @click="handleDelete(scope.row.insectDeviceId)"
            ><i class="el-icon-delete"></i> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <template v-slot:boxright>
      <div class="zhtabletitle">所有虫情设备
        <el-cascader
          :options="options"
          :props="{ expandTrigger: 'hover',value: 'companyMark',children:'child',label:'ownershipName', checkStrictly: true, }"
          clearable
          @change="ownership"
        />
      </div>
      <el-table
        v-loading="loadingtwo"
        highlight-current-row
        :data="tableDatatwo"
        stripe
        border
        height="85%"
        @selection-change="handleSelectionChangetwo"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="deviceName" label="虫情设备名称" />
        <el-table-column prop="deviceNumber" label="设备编号" />
        <el-table-column label="经纬度">
          <template slot-scope="scope">
            <div v-if="scope.row.llatitude">
              纬度: {{ scope.row.llatitude }}
            </div>
            <div v-if="scope.row.longitude">
              经度: {{ scope.row.longitude }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSizetwo"
        :current-page="currentPagetwo"
        :total-size="totalSizetwo"
        @changePageSize="changePageSizetwo"
        @changeCurrentPage="changeCurrentPagetwo"
      />
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/pest-equipment-management/index";
import BaseMainSlot from "@/components/BaseMainSlot/basezuoyou.vue"
import { mymixin } from "@/utils/mixin"
// import { getToken } from '@/utils/auth';
import { mapGetters } from "vuex";
import Axios from "axios";

export default {
  name: "PestEquipmentManagement",
  components: { ActionBar, Pagination, BaseMainSlot },
  mixins: [mymixin],
  data() {
    return {
      // ----表格二号----
      loadingtwo: true,
      // 当前页
      currentPagetwo: 1,
      // 每页的数据条数
      pageSizetwo: 10,
      // 总条数
      totalSizetwo: 0,
      // 表格二号数据
      tableDatatwo: [],
      // 是否能输入
      // -------
      canInput: false,
      rules: {},
      // 选中的数据项数组 employeeId组成 (此数组最多为一个)
      nowselectedList: [],
      dataTreeItemList: [],
      options: []
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() {
    this.getTableDataListone()
    // 获取表格数据
    this.getTableDataListtwo();
    this.getSelectlist()
  },
  mounted() {},
  methods: {
    // 获取当前拥有类型表格
    getTableDataListone() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          organizationNo: sessionStorage.organizationNo
        }
      }
      nowpagereq.getownlist(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error('已有虫情设备表格获取失败')
        }
        let data = res.data.content;
        // 赋值总条数
        this.totalSize = res.data.totalElements;
        // 赋值数组
        this.tableData = data;
        this.addblankmet();
        this.resetActionBar();
        this.addActive = false
      });
    },
    // 获取所有类型表格
    getTableDataListtwo(e) {
      this.loadingtwo = true;
      nowpagereq.getAllList(e || sessionStorage.organizationNo).then(res => {
        this.loadingtwo = false;
        if (res.code === 0) {
          this.$message.error('所有农业类型表格获取失败')
        }
        let data = res.data.insectDevice;
        // 赋值总条数
        this.totalSizetwo = data.length;
        // 赋值数组
        this.tableDatatwo = data;
        if (this.tableDatatwo.length < this.pageSizetwo) {
          let havline = this.tableDatatwo.length % this.pageSizetwo
          if (havline < this.pageSizetwo) {
            const remain = this.pageSizetwo - havline;
            for (var i = 0; i < remain; i++) {
              this.tableDatatwo.push({ 'index': i + this.tableDatatwo.length - 1 });
            }
          }
        }
        this.resetActionBar();
        this.addActive = false
      });
    },
    async getSelectlist() {
      Axios({
        url: this.$cloudBaseurl + `ownership/queryTreeByCompanyMark?companyMark=${sessionStorage.organizationNo}`,
        method: "get"
      }).then((res) => {
        if (res.data.code === 1) {
          // this.getTableDataList();
          this.dataTreeItemList = [res.data.data];
          // console.log(res.data)
          this.options = this.filterArrForKey([res.data.data])
          this.dialogFormVisible = false;
          // this.$message.success("查询成功！");
        } else {
          this.$message.warning("查询失败！");
        }
      })
    },
    // 循环过滤树形数组
    filterArrForKey(arr) {
      let newArr = []
      if (arr === []) {
        return
      }
      newArr = arr.map(item => {
        if (item.child.length > 0) {
          item = {
            ...item,
            child: this.filterArrForKey(
              item.child
            )
          }
        } else {
          delete item.child
        }
        return item
      })
      newArr = newArr.filter(item => item != null)
      return newArr
    },
    ownership(e) {
      // console.log(e)
      if (e) {
        let text = e.slice(-1)
        // console.log(text[0])
        this.getTableDataListtwo(text[0])
      }
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    changePageSizetwo(pageSize) {
      this.pageSizetwo = pageSize;
      this.getTableDataListtwo();
    },
    changeCurrentPagetwo(currentPage) {
      this.currentPagetwo = currentPage;
      this.getTableDataListtwo();
    },
    handleSelectionChange(list) {
      this.nowselectedList = [];
      this.nowselectedList = list.map(item => {
        return item.insectDeviceId
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    handleSelectionChangetwo(list) {
      this.nowselectedList = [];
      if (list.length > 1) {
        this.$message.warning("只能逐条添加")
        return
      }
      this.nowselectedList = list
      if (this.nowselectedList && this.nowselectedList.length > 0) this.addActive = true;
      else this.addActive = false;
    },
    handleDelete(e) {
      // nowpagereq.del(e).then(
      //   res => {
      //     if (res.code === 1) {
      //       this.getTableDataListone()
      //       this.$message.success('删除成功')
      //     } else {
      //       this.$message.error('删除失败')
      //     }
      //   }
      // )
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          nowpagereq.del(e).then(res => {
            if (res.code === 1) {
              this.$message.success("删除成功");
              this.getTableDataList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    delmessage() {
      if (this.nowChanceStau === 'del') {
        nowpagereq.dellist(this.nowselectedList).then(
          res => {
            if (res.code === 1) {
              this.getTableDataListone()
              this.$message.success('删除成功')
            } else {
              this.$message.error('删除失败')
            }
          }
        )
      }
    },
    add() {
      // if (this.nowChanceStau === 'add') {
      nowpagereq.addlist(this.nowselectedList[0]).then(
        res => {
          if (res.code === 1) {
            this.getTableDataListone()
            this.resetActionBar()
            this.$message.success('添加成功')
          } else {
            this.$message.error('添加失败')
          }
        }
      )
      // }
    }
  }
};
</script>
<style lang="scss" scoped>
.zhtabletitle{
  color:#31f7dd;
  margin-bottom: 10px;
}
</style>
